<wcm-list> <... markup for each Post ...> </wcm-list>
4.3.1 wcm-list
wcm-list tag reads a category from WCM Content Portlet configuration and created a list with posts attached to that category.
will be combined as
<ul>
<li>
<... markup for each Post ...>
</li>
<li>
<... markup for each Post ...>
</li>
...
</ul>
Main attributes of wcm-list tag:
index
index allows to define explicity wich category from WCM Content Portlet configuration will be linked with wcm-list tag.
By default, if index attribute is not present, wcm-list takes order in which categories are declared in portlet configuration.
For example, given the following portlet configuration:
a template like this, will use same order for wcm-list as categories are declared:
... <wcm-list> <... Content combined with Top Events category ...> </wcm-list> <wcm-list> <... Content combined with Concert category ...> </wcm-list> ...
In this new example we are using index tag combine wcm-list with a category:
... <wcm-list index="3"> <... Content combined with Sporting category ...> </wcm-list> ...
index attribute starts from 0 for first category defined in the portlet configuration.
index attribute only counts categories, in the past example index="0" points to "Top Events" category as "TicketMonster's Title" first entry is a post.
from, to
By default wcm-list iterates over all posts attached to a category. from and to attributes allows to define from and to which posts to iterate.
from and to attributes can be present by separate or together into wcm-list.
Valid values are integer starting by 0:
... <wcm-list from="0" to="3"> <... Iterating over posts 0, 1 and 2 for category ...> </wcm-list> ...
Also can be used as values "first" and "last":
... <wcm-list from="first" to="3"> <... Iterating over posts 0, 1 and 2 for category ...> <wcm-list> ...
... <wcm-list from="5" to="last"> <... Interating from post 5 until end ...> </wcm-list> ...
id, class
wcm-list can also use id or class attributes to map with <ul> attributes.
For example:
... <wcm-list id="myid" class="mycssclass"> ... </wcm-list> ...
will be render as
... <ul id="myid" class="mycssclass"> ... </ul> ...
list in categories with one post
By default, wcm-list renders posts attached to a category using a list markup.
There is a specific case when category only have one post attached.
In this case:
<wcm-list> <... markup for each Post ...> </wcm-list>
will be render as
<div> <... markup for each Post ...> </div>
4.3.2 wcm-param-list
wcm-param-list tag works similar like previous wcm-list, main difference is category used to iterate is passed as a parameter.
In the following example:
We have an example post called "Almost (Mostly) Morrison" that renders a list of categories attached, like "Top Events".
We want to make a link for "Top Events" category that browse all elements of "Top Events" category in a Category template using same WCM Content portlet.
In this scenario, "Top Events" category is a category passed as a parameter, not defined in the portlet configuration, and it can be rendered using wcm-param-list with the same behaviour and attributes described in wcm-list tag.
... <wcm-param-list from="first" to="3"> <... markup for each Post ...> </wcm-param-list> ...
This tag is used in combination with wcm-cat-list and wcm-link that will be commented later.
4.3.3 wcm-file-list
wcm-file-list tag works similar like wcm-list, main different is that iterates over uploads elements instead of posts.
For example, the following snippet:
is rendered using template:
...
<wcm-file-list index="3">
<wcm-link target="_blank">
<wcm-description></wcm-description>
</wcm-link>
</wcm-file-list>
...
in a WCM Content portlet with following configuration:
As we can see, wcm-file-list iterates over all uploads attached to "Metro" category (index="3") and per each uploads it creates a link pointing to the upload file using wcm-link and wcm-description tags.
path
In addition to all attributes described in wcm-list, wcm-file-list can use path attribute to attach explicitly a category in the template instead to use index.
path attribute has precendence over index attribute.
For example:
...
<wcm-file-list path="/Docs">
<wcm-link target="_blank">
<wcm-description></wcm-description>
</wcm-link>
</wcm-file-list>
...
4.3.4 wcm-cat-list
wcm-cat-list works similar like wcm-list, main difference is that wcm-cat-list iterates over categories.
parent
wcm-cat-list can define category using parent attribute to define a path where to iterate.
For example:
...
<wcm-cat-list parent="/Docs">
<h1>
<wcm-cat-name></wcm-cat-name>
</h1>
</wcm-cat-list>
...
will iterate over "Docs" children:
rendering:
type
wcm-cat-list can also filter categories using type attribute. type can have one of these values: category, folder, tag.
For example:
...
<wcm-cat-list parent="/Events" type="tag">
<h1>
<wcm-cat-name></wcm-cat-name>
</h1>
</wcm-cat-list>
...
will iterate over "Events" children filtered by "tag" type:
rendering:
parent and type attributes can be used combined or alone in wcm-cat-list.
4.3.5 wcm-single
wcm-single tag reads a post from WCM Content Portlet configuration.
For example, the following template:
... <wcm-single> <wcm-content></wcm-content> </wcm-single> ...
will take first post ("TicketMonster's Title") in the portlet configuration:
and will combine its post content in the output:
In this example a wcm-content tag is used to get and combine main post content in the template output.
wcm-content will be commented later.
index
wcm-single uses index attribute to define explicity wich post from WCM Content Portlet configuration will be linked with wcm-single tag.
By default, if index attribute is not present, wcm-single takes order in which posts are declared in portlet configuration.
4.3.6 wcm-param-single
wcm-param-single tag works similar like previous wcm-single, main difference is post used is passed as a parameter.
For example, in the following portlet:
we have a main template that iterates over posts attached to a category as it is described in its configuration:
One of main features in WCM Content Portlet is to navigate inside posts in the same portlet, in the example, images has a special link that allows to use a post template to render a specific post:
wcm-param-single is used in post templates to render the post passed as parameter like in the example:
...
<wcm-param-single>
<div class="mockup-mobile-main">
<div class="mockup-mobile-title">
<h1>
<wcm-title></wcm-title>
</h1>
</div>
<div class="mockup-mobile-img">
<wcm-link><wcm-img></wcm-img>
</wcm-link>
</div>
<div class="mockup-mobile-text">
<h4>
<wcm-excerpt max-length="180"> </wcm-excerpt>
</h4>
<wcm-content skipimages="0">
</wcm-content>
</div>
</div>
</wcm-param-single>
...
4.3.7 wcm-param-name
WCM Content Portlet allows to pass posts or categories as parameters and to render them using post templates and category templates.
For example:
wcm-param-name can be used inside a category template to render the category name passed as parameter.
For example, in the following template:
...
<div class="mockup-category-title mockup-grey2-background">
<wcm-param-name></wcm-param-name>
</div>
<div class="mockup-top1">
<wcm-param-list from="first" to="3">
<h2>
<wcm-created></wcm-created>
</h2>
...
</wcm-param-list>
...
wcm-param-name is used to render category name passed like in the "Top Events" and "Special Event" examples:
and
4.3.8 wcm-link
wcm-link tag allows to create dynamic links to browse content inside a WCM Content Portlet.
For example, we have a main template in a portlet that uses a wcm-list to iterate over a category and render content of each post:
...
<wcm-list class="mockup-mobile-list">
<div class="mockup-mobile-img">
<wcm-link>
<wcm-img></wcm-img>
</wcm-link>
</div>
<div class="mockup-mobile-text">
<h2>
<wcm-link>
<wcm-title></wcm-title>
</wcm-link>
</h2>
<p>
<wcm-excerpt max-length="180"> </wcm-excerpt>
</p>
</div>
</wcm-list>
...
wcm-list will create a list and each post will be rendered with the template defined inside wcm-list tag.
Each post will have two special links rendered with wcm-link, these links will indicate to portlet that it has to use a post template to render the specific post.
wcm-link is responsible to generate a specific link with the id of post or category passed as parameter.
Links are generated as <a> tags with the following href structure by default:
-
href="<current_page>/post/id/<id of current post>" in case wcm-link is used in a list of posts.
-
href="<current_page>/cat/id/<id of current category>" in case wcm-link is used in a list of categories.
For example:
http://localhost:8080/portal/classic/magazine/concert (Main page) <a href="concert/post/id/367">...</a> (Generated link for a post) <a href="concert/cat/id/488">...</a> (Generated link for a category)
href
wcm-link can use href attribute to indicate that it will be a different page responsible to render the post/category passed as parameter.
For example:
<wcm-link href="mypage"> ... </wcm-link>
it would change the previous examples links as:
http://localhost:8080/portal/classic/magazine/concert (Main page) <a href="mypage/post/id/367">...</a> (Generated link for a post) <a href="mypage/cat/id/488">...</a> (Generated link for a category)
class
wcm-link uses class attribute to define a css class into rendered link.
For example:
<wcm-link class="myclass"> ... </wcm-link>
will be rendered as
<a href="concert/post/id/367" class="myclass">...</a> (Generated link for a post)
index
wcm-link has possibility to disable generated id. This case is handled with index="disable" attribute.
For example:
<wcm-link class="myclass" index="disable"> ... </wcm-link>
will generate
<a href="concert" class="myclass">...</a>
4.3.9 wcm-img
wcm-img tag extracts images from post content.
For example, in the WCM Editor portlet we can write a post in a document style format: combining images, text with style.
In a template context, we may want to define a layout for presenting posts in a structure, and to use post's title, post's excerpt and first image defined inside content.
<wcm-list class="mockup-mobile-list">
<div class="mockup-mobile-img">
<wcm-link>
<wcm-img></wcm-img>
</wcm-link>
</div>
<div class="mockup-mobile-text">
<h2>
<wcm-link>
<wcm-title></wcm-title>
</wcm-link>
</h2>
<p>
<wcm-excerpt max-length="180"> </wcm-excerpt>
</p>
</div>
</wcm-list>
̣
wcm-img tag will search for <img> elements defined in post content and it will render them separately.
index
wcm-img by default extracts first image found inside post content. index attribute can be used to select which image extract.
<wcm-img index="0"></wcm-img>
will extract first image found in post content as similar like
<wcm-img></wcm-img> ̣
<wcm-img index="1"></wcm-img>
will extract second image found in post content.
class
wcm-img uses class attribute to define a css class into rendered image.
For example:
<wcm-img class="myclass"></wcm-img>
will generate
<img src="..." class="myclass">
4.3.10 wcm-title
wcm-title extracts title field from post.
For example, given following post:
the following template
<wcm-title></wcm-title>
will render
Almost (Mostly) Morrison
length
wcm-title can use max-length attribute to limit size of the title in the render.
For example:
<wcm-title max-length="4"></wcm-title>
will render
Almo ...
4.3.11 wcm-excerpt
wcm-excerpt extracts excerpt field from post.
For example, given the previous post:
the following template
<wcm-excerpt></wcm-excerpt>
will render
This show is for all those who traded in Hemingway for the poetry of the Doors, but really can't remember why.
length
wcm-title can use max-length attribute to limit size of the excerpt in the render.
For example:
<wcm-excerpt max-length="20"></wcm-excerpt>
will render
This show is for all ...
4.3.12 wcm-iter
wcm-iter tag is used inside of a {wcm-list, wcm-param-list, wcm-file-list, wcm-cat-list} tag and allows to render markup in specific iteration defined by i attribute.
For example, the following template:
<wcm-list class="lwwcm-list-spotlight" from="0" to="3">
<wcm-link>
<wcm-img class="mockup-item-image-spotlight"></wcm-img>
</wcm-link>
<wcm-iter i="0">
<div class="mockup-item-title-spotlight mockup-red-background">
<wcm-link>
<wcm-title></wcm-title>
</wcm-link>
</div>
</wcm-iter>
<wcm-iter i="1">
<div class="mockup-item-title-spotlight mockup-green-background">
<wcm-link>
<wcm-title></wcm-title>
</wcm-link>
</div>
</wcm-iter>
<wcm-iter i="2">
<div class="mockup-item-title-spotlight mockup-blue-background">
<wcm-link>
<wcm-title></wcm-title>
</wcm-link>
</div>
</wcm-iter>
<div class="mockup-item-description-spotlight">
<wcm-excerpt max-length="120"> </wcm-excerpt>
</div>
</wcm-list>
Content defined inside wcm-iter only will be processed in the iteration defined in i attribute, and it will generate following render:
We can see how title color changes on each iteration as it's defined with wcm-iter tag.
4.3.13 wcm-created
wcm-created tag shows post/upload created field.
For example:
<wcm-param-single> <wcm-created></wcm-created> <span class="mockup-post-author">| By <wcm-author></wcm-author> </span> </wcm-param-single>
is rendered as
format
wcm-created tag can use format attribute to define a mask used to parse Date objects, format attribute should match with java.text.SimpleDateFormat patterns.
By default, wcm-created uses two patterns, depends of Date (today or other):
static SimpleDateFormat today = new SimpleDateFormat("HH:mm:ss z");
static SimpleDateFormat other = new SimpleDateFormat("d MMM yyyy");
4.3.14 wcm-author
wcm-author tag shows post/upload author field.
For example:
<wcm-param-single> <wcm-created></wcm-created> <span class="mockup-post-author">| By <wcm-author></wcm-author> </span> </wcm-param-single>
is rendered as
4.3.15 wcm-content
wcm-content tags renders whole post content.
A common use case, creating a template for a post, can be like this:
<wcm-param-single>
<div class="mockup-mobile-main">
<div class="mockup-mobile-title">
<h1>
<wcm-title></wcm-title>
</h1>
</div>
<div class="mockup-mobile-img">
<wcm-link><wcm-img></wcm-img>
</wcm-link>
</div>
<div class="mockup-mobile-text">
<h4>
<wcm-excerpt max-length="180"> </wcm-excerpt>
</h4>
<wcm-content skipimages="0">
</wcm-content>
</div>
</div>
</wcm-param-single>
rendered as
we can see that in the post template we have a "fixed part" defined with wcm-title and also wcm-img to extract first image found in post content.
skipimages
With skipimages attribute we can combine wcm-img and wcm-content together, for example, if I use a image inside content with a wcm-img tag I don't want to repeat that image in the next wcm-content tag.
Using skipimages attribute we can define a list of index (starting in 0) which images will be skipped rendering post content. In the previous example we see how defining skipimages="0" wcm-content won't render first image found.
skipimages attribute can also accept a list of indexes in the format
<wcm-content skipimages="0,1,2">
4.3.16 wcm-filename
wcm-filename tag shows upload filename field inside a wcm-file-list tag.
For example:
<wcm-file-list path="/Docs">
<wcm-link target="_blank">
<wcm-filename></wcm-filename>
</wcm-link>
</wcm-file-list>
will be rendered as
length
wcm-filename can use max-length attribute to limit size of the file name in the render.
4.3.17 wcm-mimetype
wcm-mimetype tag shows upload mimetype field inside a wcm-file-list tag.
For example:
<wcm-file-list path="/Docs">
<wcm-link target="_blank">
<wcm-mimetype></wcm-mimetype>
</wcm-link>
</wcm-file-list>
will be rendered as
length
wcm-mimetype can use max-length attribute to limit size of the mimetype in the render.
4.3.18 wcm-description
wcm-description tag shows upload description field inside a wcm-file-list tag.
For example:
<wcm-file-list path="/Docs">
<wcm-link target="_blank">
<wcm-description></wcm-description>
</wcm-link>
</wcm-file-list>
will be rendered as
length
wcm-description can use max-length attribute to limit size of the description in the render.
4.3.19 wcm-cat-name
wcm-cat-name tag shows category name inside a wcm-cat-list tag.
For example:
<wcm-cat-list parent="/">
<h1>
<wcm-cat-name></wcm-cat-name>
</h1>
</wcm-cat-list>
will be rendered as
length
wcm-cat-name can use max-length attribute to limit size of the category name in the render.
4.3.20 wcm-cat-type
wcm-cat-type tag shows category type inside a wcm-cat-list tag.
For example:
<wcm-cat-list parent="/">
<h1>
<wcm-cat-type></wcm-cat-type>
</h1>
</wcm-cat-list>
will be rendered as
4.3.21 wcm-categories
wcm-categories tag iterates over categories for a given post, so, this tag is used inside wcm-list, wcm-param-list, wcm-single or wcm-param-single.
For example:
<wcm-list class="lwwcm-list-category-other" from="1" index="0" to="last">
<div class="mockup-category-other">
<wcm-link>
<wcm-img></wcm-img>
</wcm-link>
</div>
<div class="mockup-category-other-desc">
<div>
<wcm-created></wcm-created>
</div>
<wcm-link class="mockup-category-other-title mockup-green">
<wcm-title></wcm-title>
</wcm-link>
<p>
<wcm-excerpt></wcm-excerpt>
</p>
<wcm-categories class="lwwcm-list-tags" type="tag">
<wcm-link>
<wcm-cat-name></wcm-cat-name>
</wcm-link>
</wcm-categories>
</div>
</wcm-list>
will render a list of posts, and each post will have a list of categories
type
wcm-categories can also filter categories using type attribute. type can have one of these values: category, folder, tag.
from, to
By default wcm-categories iterates over all categories attached to a post. from and to attributes allows to define from and to which categories to iterate.
from and to attributes can be present by separate or together into wcm-categories.
Valid values are integer starting by 0:
... <wcm-categories from="0" to="3"> <... Iterating over categories 0, 1 and 2 ...> </wcm-categories> ...
Also can be used as values "first" and "last":
... <wcm-categories from="first" to="3"> <... Iterating over categories 0, 1 and 2 ...> <wcm-categories> ...
... <wcm-categories from="5" to="last"> <... Interating from category 5 until end ...> </wcm-categories> ...
id, class
wcm-categories can also use id or class attributes to map with <ul> attributes.
For example:
... <wcm-categories id="myid" class="mycssclass"> ... </wcm-categories> ...
will be render as
... <ul id="myid" class="mycssclass"> ... </ul> ...
link
Combining wcm-categories with wcm-link indicates to WCM Content portlet that uses category template defined in configuration to render category passed as parameter.
In the previous example, browsing "Special Event" will pass this category to the category template defined in configuration:
and same for "Top Events" link
4.3.22 wcm-comments
wcm-comments tag reads comments from a given post and iterates over them creating a list. wcm-comments tag can be used inside wcm-list, wcm-single, wcm-param-list or wcm-param-single.
For example, we have these comments in the following post
and we can render them in a post template
<wcm-param-single>
<h2>
Comments
</h2>
<wcm-comments>
<div class="mockup-post-comment-a">
<wcm-comment-created></wcm-comment-created>
| By <wcm-comment-author></wcm-comment-author>
</div>
<div class="mockup-post-comment-b">
<wcm-comment-content></wcm-comment-content>
</div>
</wcm-comments>
...
rendered as follows
from, to
By default wcm-comments iterates over all comments attached to a post. from and to attributes allows to define from and to which comments to iterate.
from and to attributes can be present by separate or together into wcm-comments.
Valid values are integer starting by 0:
... <wcm-comments from="0" to="3"> <... Iterating over comments 0, 1 and 2 ...> </wcm-comments> ...
Also can be used as values "first" and "last":
... <wcm-comments from="first" to="3"> <... Iterating over comments 0, 1 and 2 ...> <wcm-comments> ...
... <wcm-comments from="5" to="last"> <... Interating from comment 5 until end ...> </wcm-comments> ...
id, class
wcm-comments can also use id or class attributes to map with <ul> attributes.
For example:
... <wcm-comments id="myid" class="mycssclass"> ... </wcm-comments> ...
will be render as
... <ul id="myid" class="mycssclass"> ... </ul> ...
4.3.23 wcm-comment-content
wcm-comment-content tag shows comment content field from a given comment inside wcm-comments tag.
4.3.24 wcm-comment-created
wcm-comment-created tag shows comment created field from a given comment inside wcm-comments tag.
4.3.25 wcm-comment-author
wcm-comment-author tag shows comment author field from a given comment inside wcm-comments tag.
4.3.26 wcm-form-comments
wcm-form-comments tag creates a pre-configured form to add new comments into a post. wcm-form-comments has possibility to choose if form will be present for logged users or anonymous user using type attribute.
For example, this form will be shown for a post that only accepts comments from logged users:
<wcm-form-comments type="logged">
<h2>
New Comment
</h2>
<div class="mockup-comment-textarea">
<wcm-form-content>
</wcm-form-content>
</div>
<div class="mockup-comment-link">
<wcm-form-button>Send comment</wcm-form-button>
</div>
</wcm-form-comments>
the following example is a form shown for a post that accepts comment from anonymous users:
<wcm-form-comments type="anonymous">
<h2>
New Comment
</h2>
<div class="mockup-comment-author">
<span class="mockup-comment-label">Author:</span>
<wcm-form-author></wcm-form-author>
</div>
<div class="mockup-comment-email-url">
<span class="mockup-comment-label">Email:</span>
<wcm-form-email></wcm-form-email>
</div>
<div class="mockup-comment-email-url">
<span class="mockup-comment-label">Url:</span>
<wcm-form-url></wcm-form-url>
</div>
<div class="mockup-comment-textarea">
<wcm-form-content>
</wcm-form-content>
</div>
<div class="mockup-comment-link">
<wcm-form-button>Send comment</wcm-form-button>
</div>
</wcm-form-comments>
wcm-form-comments tag uses different tag to create several form elements as it has been shown in the examples.
4.3.27 wcm-form-content
wcm-form-content tag is used inside wcm-form-comments tag. This tag renders a textarea form element linked with comment content field.
class
wcm-form-content can also use class attribute to add a css class in textarea element.
4.3.28 wcm-form-author
wcm-form-author tag is used inside wcm-form-comments tag. This tag renders a input form element linked with comment author field.
class
wcm-form-author can also use class attribute to add a css class in input element.
4.3.29 wcm-form-email
wcm-form-email tag is used inside wcm-form-comments tag. This tag renders a input form element linked with comment author field.
class
wcm-form-email can also use class attribute to add a css class in input element.
4.3.30 wcm-form-url
wcm-form-url tag is used inside wcm-form-comments tag. This tag renders a input form element linked with comment url field.
class
wcm-form-url can also use class attribute to add a css class in input element.
4.3.31 wcm-form-button
wcm-form-button is used inside wcm-form-comments tag. This tag render a link form element to submit wcm-form-comments form.
class
wcm-form-button can also use class attribute to add a css class in link element.
4.3.32 Summary of wcm tags
|
wcm tag |
Description |
Attributes |
wcm tags inside |
|
wcm-list |
list of posts from configuration portlet |
index, from, to, id, class |
wcm-categories |
|
wcm-param-list |
list of posts from parameter |
from, to, id, class |
wcm-categories |
|
wcm-file-list |
list of uploads from configuration portlet |
index, path, from, to, id, class |
wcm-link |
|
wcm-cat-list |
list of categories |
parent, type, from, to, id, class |
wcm-link |
|
wcm-single |
single post from configuration portlet |
index |
wcm-categories |
|
wcm-param-single |
single post from parameter |
|
wcm-categories |
|
wcm-param-name |
used in category templates for render category name |
|
|
|
wcm-link |
creates a wcm link |
href, class, index |
|
|
wcm-img |
extracts images from post content |
index, class |
|
|
wcm-title |
renders post title |
max-length |
|
|
wcm-excerpt |
renders post excerpt/summary |
max-length |
|
|
wcm-iter |
conditional render inside list |
i |
wcm-categories |
|
wcm-created |
shows post/upload created field |
format |
|
|
wcm-author |
shows post/upload author field |
|
|
|
wcm-content |
renders whole post content |
skipimages |
|
|
wcm-filename |
shows upload filename field |
max-length |
|
|
wcm-mimetype |
shows upload mimetype field |
max-length |
|
|
wcm-description |
shows upload description field |
max-length |
|
|
wcm-cat-name |
shows category name |
max-length |
|
|
wcm-cat-type |
shows category type |
|
|
|
wcm-categories |
list of categories per post |
type, from, to, id, class |
wcm-link |
|
wcm-comments |
list of comments per post |
from, to, id, class |
wcm-comment-content |
|
wcm-comment-content |
shows comment content field |
|
|
|
wcm-comment-created |
shows comment created field |
|
|
|
wcm-comment-author |
shows comment author field |
|
|
|
wcm-form-comments |
creates a pre-configured form for post comments |
type |
wcm-form-content |
|
wcm-form-content |
creates a textarea for comment content field |
class |
|
|
wcm-form-author |
creates an input text for comment author field |
class |
|
|
wcm-form-email |
creates an input text for comment email field |
class |
|
|
wcm-form-url |
creates an input text for comment url field |
class |
|
|
wcm-form-button |
creates a submit link |
class |
|